<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入搜索信息'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate @add="add()"></CardDate>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="explain_id" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="explain_name" label="说明名称" align="center" s>
        </el-table-column>
        <el-table-column label="说明图片" align="center">
          <template slot-scope="scope">
            <el-image v-if="tableData[scope.$index]" style="width: 100px; height: 100px"
              :src="tableData[scope.$index].explain_url" fit="fit" />
          </template>
        </el-table-column>
        <el-table-column prop="explain_describe" label="说明视频" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>



    <el-dialog title="编辑商品说明信息" class="chang-product" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
      center>
      <el-form class="info-form" inline :rules="alterRules" :model="alterForm" ref='changeFrom'
        style="text-align: center;">
        <el-form-item label="商品：" prop="explain_id" style="width: 45%">
          <el-select size="small" v-model="alterForm.explain_id" filterable placeholder="请选择商品">
            <el-option v-for="(item, index) in product" :key="index" :value="item.explain_id">{{ item.product_name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌名称：" prop="explain_name" style="width: 45%">
          <el-input size="small" v-model="alterForm.explain_name" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="说明图片：" style="width: 100%">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/productImg" :on-success="uploadSuccess1"
            :drag="true" list-type="picture" :multiple="true"
            style="display: flex;justify-content: center;align-items: center;" ref="upload1">
            <el-image v-if="alterForm.explain_url" :src="alterForm.explain_url"
              style="height: 100px;width: 100px"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="说明图片2：" style="width: 100%">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/productImg" :on-success="uploadSuccess2"
            :drag="true" list-type="picture" :multiple="true"
            style="display: flex;justify-content: center;align-items: center;" ref="upload2">
            <el-image v-if="alterForm.explain_url2" :src="alterForm.explain_url2"
              style="height: 100px;width: 100px"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="说明图片3：" style="width: 100%">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/productImg" :on-success="uploadSuccess3"
            :drag="true" list-type="picture" :multiple="true"
            style="display: flex;justify-content: center;align-items: center;" ref="upload3">
            <el-image v-if="alterForm.explain_url3" :src="alterForm.explain_url3"
              style="height: 100px;width: 100px"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="说明视频：" style="width: 100%">
          <el-upload class="product-upload" action="http://127.0.0.1:3000/api/productImg" :on-success="uploadSuccess5"
            :on-exceed="handleExceed" :drag="true" list-type="picture" :limit="1" :auto-upload="false"
            style="display: flex;justify-content: center;align-items: center;" ref="upload2">
            <el-image v-if="alterForm.explain_describe" :src="alterForm.explain_describe"
              style="height: 100px;width: 100px"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="padding: 12px 54px;margin: 0 55px;" @click="submitChange('changeFrom')">确
          定</el-button>
        <el-button style="padding: 12px 54px;margin: 0 55px;" @click="cancelChange('changeFrom')">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getExplain, addExplain, deletsExplain, getproduct } from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardDate from '@/components/commodity/CardDate.vue'
export default {
  name: 'KodaiProductType',

  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      insert: true,   //插入时的标志
      alterForm: {
        explain_id: '',
        explain_name: '',
        explain_url: '',
        explain_describe: '',
        explain_url2: '',
        explain_url3: '',
      },
      alterRules: {
        explain_name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },
        { min: 1, max: 30, message: '名称长度不允许超过 30 个字符', trigger: 'blur' }],
        explain_id: [{ required: true, message: '请输选择', trigger: 'blur' }]
      },
      product: []
    };
  },

  mounted () {
    getExplain().then(res => {
      this.tableData = res.data.data
    })
    getproduct().then(res => {
      this.product = res.data.data
    })
  },

  methods: {
    add () {
      this.dialogFormVisible = true;
      this.insert = false
    },
    handleEdit (index, row) {
      this.dialogFormVisible = true
      // console.log(index, row);
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该说明信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
        deletsExplain(row).then(res => {
          loading.close();
          if (res.data.code === 200) {
            // rows.splice(index, 1);//删掉该行
            this.$router.go(0)
            this.$notify({ title: '成功', message: '说明(' + row.explain_name + ')\t移除成功', type: 'success' });
          } else {
            this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
          }
        }).catch((err) => {
          loading.close();
          this.$message.error(err);
        })
      }).catch((err) => {
        
      })
    },
    submitChange (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.insert) {

            // this.$http.post('/productExplain/existsExplainName?ExplainId=0&ExplainName=' + this.alterForm.ExplainName).then((rep) => {
            // if (rep.data.code === 200) {
            //   if (rep.data.data) {
            //     this.$alert('品牌(' + this.alterForm.ExplainName + ')\t已存在，不能重复添加', '警告', { confirmButtonText: '确定', type: "warning" });
            //   } else {
            //     let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
            //     this.$http.post('/productExplain/add', this.$qs.stringify(this.alterForm)).then((rep) => {
            //       loading.close();
            //       if (rep.data.code === 200) {
            //         this.dialogFormVisible = false;
            //         this.reqInfo();
            //         this.$notify({ title: '成功', message: this.alterForm.ExplainName + '\t品牌添加成功', type: 'success' });
            //       } else {
            //         this.$notify({ title: '错误', message: rep.data.message, type: 'error' });
            //       }
            //     }).catch((err) => { loading.close(); this.$msg.error(err) })
            //   }
            // }
            // }).catch((err) => { this.$msg.error(err) })
          } else {
            addExplain(this.alterForm).then(res => {
              console.log(res);
              if (res.data.code === 200) {
                this.dialogFormVisible = false;
                this.$router.go(0)
                this.$notify({ title: '成功', message: this.alterForm.explain_name + '\t说明添加成功', type: 'success' });
              } else {
                this.$notify({ title: '错误', type: 'error' });
              }
            }).catch((err) => { this.$message.error('新增失败') })
          }
        } else {
          return false;
        }
      });
    },
    cancelChange (formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
      this.$notify({ title: '操作取消', message: '', type: 'success' });
    },
    // 上传图片函数
    uploadSuccess1 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片上传成功！");
        this.alterForm.explain_url = res.url;
        this.$refs['upload1'].clearFiles();
      } else {
        this.showMessage.call(this, 'error', "商品图片上传失败！");
      }
    },
    uploadSuccess2 (res, file) {
      console.log(res);
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片上传成功！");
        this.alterForm.explain_url2 = res.url;
        this.$refs['upload2'].clearFiles();
      } else {
        this.showMessage.call(this, 'error', "商品图片上传失败！");
      }
    },
    uploadSuccess3 (res, file) {
      console.log(res);
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片上传成功！");
        this.alterForm.explain_url3 = res.url;
        this.$refs['upload3'].clearFiles();
      } else {
        this.showMessage.call(this, 'error', "商品图片上传失败！");
      }
    },
    uploadSuccess5 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片上传成功！");
        this.alterForm.explain_describe = res.url;
        this.$refs['upload1'].clearFiles();
      } else {
        this.showMessage.call(this, 'error', "商品图片上传失败！");
      }
    },

    // 文件数量过多时提醒
    handleExceed () {
      this.showMessage.call(this, 'error', "最多支持1个附件上传");
    },
  },
  components: {
    CardHeader,
    CardDate,
    CardinputVue
  }
};
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__header {
  padding: 2px 10px;
}
</style>